<template>
  <div
    class="grid transition-all duration-300 ease-in-out"
    :class="[modelValue ? 'grid-rows-[1fr] opacity-100 translate-y-0' : 'grid-rows-[0fr] opacity-0 translate-y-4']"
  >
    <slot></slot>
    <!-- 
    <TransitionExpand :model-value="showSearchD">
  <H5search
    v-model="input"
    ref="box"
    :showSearchD.sync="showSearchD"
  ></H5search>
</TransitionExpand>
     -->
  </div>
</template>
<script>
  export default {
    name: 'TransitionExpand',
    props: {
      modelValue: {
        type: [Boolean, String, Number],
        default: false
      }
    }
  }
</script>
